ß<template>
	<div class="myorders-wrap">
    <div v-title style="display: none">我的订单</div>
	  <div class="order-list-content">
        <div class="order-list">
          <span class="order-icon"></span>
          <span class="order-type" id="orderType">{{ ordertype }}</span>
          <span class="down" @click="dropdown">
            <div class="horizon"></div>
            <div class="horizon"></div>
            <div class="horizon"></div>
          </span>
        </div>
        <div class="order-items" v-show="orderitems">
          <ul @click="liftup">
            <span v-for="(item,index) in this.orderslist">
            <li class="border-none"  v-if="(index % 2)==1">
              <input class="order-inputs" :id="'order' + index" type="radio" name="orders">
              <label :for="'order' + index" @click="chooseStatu(item, index)">{{ item }}</label>
            </li>
            <li v-if="(index % 2)==0">
              <input class="order-inputs" :id="'order' + index" type="radio" name="orders">
              <label :for="'order' + index" @click="chooseStatu(item, index)">{{ item }}</label>
            </li>
            </span>
          </ul>
    	</div>
      </div>

      <div class="orders">
        <div v-for="(item,index) in this.orderinfo">
          <div class="order-content" @click="toOrderdetail(item.out_trade_no)">
            <img :src="'http://cj.lightway.cc/media/' + item.coach_img"/>
            <div class="order-info">
              <p>{{ item.coach }}</p>
              <p class="ads">{{ item.area }} <span>{{ item.training }}</span></p>
              <p class="times">{{ item.data }} <span>{{ time(item.start_time) + '~' + time(item.end_time)}}</span></p>
            </div>
            <div class="price-info">
              <p class="status" v-if="item.status !== 'closed'">{{ status(item.status) }}</p>
              <p class="unable-statu" v-else>{{ status(item.status) }}</p>
              <p class="types">{{ item.car_type }} <span>{{ item.subject }}</span></p>
              <p class="orderpay">合计: <span>{{ item.price }}</span>元</p>
            </div>
          </div>
        </div>
      </div>

      <div class="cover" v-show="cover" @click="liftup"></div>
	</div>
</template>
<script type="text/ecmascript-6">
const ERR_OK = 1;
export default {
    props: {
    },
    data() {
      return {
        orderitems: '',
        cover: '',
        hash: '',
        ordertype: '全部订单',
        orderslist: [ '全部订单', '待付款', '待使用', '待评价', '待退款' ],
        orderinfo: [],
        orders: []
      };
    },
  /*  watch: {
      hash: function (val, oldVal) {
        switch (val) {
          case '':
            break;
          case '#全部订单':
            break;
          case '#待付款':
            break;
          case '#待确认':
            break;
          case '#待使用':
            break;
          case '#待评价':
            break;
          case '#待退款':
            break;
          default:
        }
      }
    }, */
    created() {
    //  this.hash = this.$route.hash;
      var status = this.$route.query.statu;
      var index = this.$route.query.code;
      this.$http.get('api/course/getorderlist/?moblie=' + window.localStorage.cphone).then((response) => {
        response = response.body;
        if (response.errno === ERR_OK) {
          this.orders = response.data;
          this.chooseStatu(status, index);
        }
      });
    },
    methods: {
      time: function(value) {
        return value.substr(0, 5);
      },
      status: function(value) {
        if (value === 'nonpay') {
          return '待付款';
        } else if (value === 'paied') {
          return '已支付';
        } else if (value === 'notconfirmed') {
          return '待确认';
        } else if (value === 'notused') {
          return '待使用';
        } else if (value === 'notevaluate') {
          return '待评价';
        } else if (value === 'refunded') {
          return '已退款';
        } else if (value === 'await') {
          return '待退款';
        } else if (value === 'closed') {
          return '已关闭';
        } else if (value === 'completed') {
          return '交易完成';
        }
      },
      restatus: function(value) {
        if (value === '待付款') {
          return 'nonpay';
        } else if (value === '待确认') {
          return 'notconfirmed';
        } else if (value === '待使用') {
          return 'notused';
        } else if (value === '待评价') {
          return 'notevaluate';
        } else if (value === '待退款') {
          return 'await';
        } else if (value === '全部订单') {
          return 'all';
        }
      },
      liftup() {
        this.cover = '';
        this.orderitems = '';
      },
      dropdown() {
        if (this.cover === '') {
          this.cover = 'true';
          this.orderitems = 'true';
        } else {
          this.liftup();
        }
      },
      chooseStatu: function(value, index) {
        let statu = this.restatus(value);
        this.ordertype = value;
        document.getElementsByName('orders')[index].checked = 'true';
        this.orderinfo = [];
        if (statu === 'all') {
          this.orderinfo = this.orders;
        } else {
          for (let i in this.orders) {
            if (this.orders[i].status === statu) {
              this.orderinfo.push(this.orders[i]);
            }
          }
        }
      },
      toOrderdetail(order) {
        this.$router.push({path: '/orderdetail/', query: {order_id: order}});
      }
    }
};
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  @import "../../common/stylus/car.styl"
  /* 主要文字 黑 $main-fn
     次要文字 灰 $se-fn
     预填文字 灰 $pre-fn
     描边 灰 $border 
     背景 灰白 $bg 
     主题 红 $theme
     辅助 蓝 $assist */
    .myorders-wrap
      .cover
        height 100%
        width 100%
        background-color rgba(32,32,32,0.8)
        position fixed
        top 0px
        z-index 1000
      .order-list-content
        top 0px
        background-color rgb(255,255,255)
        position fixed
        width 100%
        z-index 1500
      .order-list
        height 40px
        border-1px($border)
        line-height 40px
        .order-icon
          float left
          margin-left 15px
          margin-top 11.5px
          bg-image('shedule_icon')
          rectangle-icon(rgb(255,255,255),17px,17px)
        .order-type
          display inline-block
          float left
          color rgb(33,33,33)
          font-size 16px
          margin-left 7px
        .down
          float right
          display inline-block
          width 40px
          height 32px
          padding-top 8px
          -webkit-tap-highlight-color rgba(0,0,0,0)
          .horizon
            width 15px
            height 0px
            border 0.5px solid $pre-fn
            margin-top 4.5px
      .order-items
        ul
          list-style none
          color rgb(207,206,206)
          font-size 15px
          width 100%
          background-color rgb(255,255,255)
          position fixed
          top 40px
          .border-none
            border none
          li
            list-style none
            width 50%
            box-sizing border-box
            border-right 1px solid $border
            border-1px($border)
            height 40px
            line-height 40px
            text-align center
            display inline
            float left
            background-color rgb(255,255,255)
            label
              width 100%
              display inline-block
            .order-inputs
              display none
            .order-inputs:checked+label
              color $se-fn
      .orders
        margin-top 40px
      .order-content
        height 95px
        width 100%
        background-color rgb(255,255,255)
        border-1px($border)
        color $se-fn
        img
          margin-top 16.5px
          margin-left 17px
          width 57px
          height 59px
          border 1px solid $se-fn
          border-radius 5px
          float left
        .order-info
          margin-left 10px
          display inline
          float left
          margin-top 17px
          font-size 15px
          .ads
            margin-top 11.5px
            font-size 11px
          .times
            margin-top 11.5px
            font-size 11px
        .price-info
          margin-right 17px
          display inline
          float right
          text-align right
          margin-top 12px
          .status
            font-size 11px
            color $theme
            width 50px
            height 21px
            line-height 21px
            text-align center
            border 1px solid $theme
            border-radius 5px
            float right
          .unable-statu
            font-size 11px
            color $se-fn
            width 50px
            height 21px
            line-height 21px
            text-align center
            border 1px solid $se-fn
            border-radius 5px
            float right
          .types
            font-size 13px
            padding-right 0px
            margin-top 32px
          .orderpay
            font-size 11px
            margin-top 9px
            color rgb(207,206,206)
</style>